﻿@page "/selects"
@inject DialogService Dialog

<h3>Select 选择器</h3>

<h4>当选项过多时，使用下拉菜单展示并选择内容</h4>

<Block Title="Select 下拉选择框" Introduction="提供各种颜色的下拉选择框">
    <p>本例中，第一个下拉框没有进行 <code>Value</code> 双向绑定，所以选择不同选项时仅自己变化，其余下拉框共用同一数据源 <code>Items</code> 并且双向绑定 <code>Value</code> 值，选择不同选项时一同变化</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Success" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Danger" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Warning" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Info" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Secondary" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select Color="Color.Dark" Items="Items" OnSelectedItemChanged="OnItemChanged" @bind-Value="Model.Name"></Select>
        </div>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="Select 禁用下拉框" Introduction="选择器不可用状态">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Success" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Danger" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Warning" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Info" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Secondary" Items="Items" IsDisabled="true"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Dark" Items="Items" IsDisabled="true"></Select>
        </div>
    </div>
    <p class="mt-3">下拉框内选项 <b>禁用</b> 示例</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items4" />
        </div>
    </div>
</Block>

<Block Title="Select 双向绑定" Introduction="通过 <code>Select</code> 组件绑定 <code>Model.Name</code> 属性，改变下拉框选项时，文本框内的数值随之改变。">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name"></Select>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInput readonly @bind-Value="Model.Name" />
        </div>
    </div>
</Block>

<Block Title="Select 级联绑定" Introduction="通过选择第一个下拉框不同选项，第二个下拉框动态填充内容。">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick" />
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items2" />
        </div>
        <div class="col-12">
            <Button Text="弹窗中级联示例" OnClickWithoutRender="OnShowDialog" />
        </div>
    </div>
</Block>

<Block Title="Select 客户端验证" Introduction="下拉框未选择时，点击提交按钮时拦截。">
    <ValidateForm Model="BindModel">
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <Select @bind-Value="BindModel.Name">
                    <Options>
                        <SelectOption Text="请选择 ..." Value="" />
                        <SelectOption Text="北京" Value="1" />
                        <SelectOption Text="上海" Value="2" />
                        <SelectOption Text="广州" Value="3" />
                    </Options>
                </Select>
            </div>
            <div class="col-12 col-sm-6 align-self-end">
                <Button ButtonType="ButtonType.Submit">提交</Button>
            </div>
        </div>
    </ValidateForm>
</Block>

<Block Title="分组" Introduction="备选项进行分组展示">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Color="Color.Primary" Items="GroupItems">
            </Select>
        </div>
    </div>
</Block>

<Block Title="绑定泛型为 Guid 结构" Introduction="组件绑定值为 Guid 结构体示例">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Color="Color.Primary" Items="GuidItems" @bind-Value="CurrentGuid" />
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@CurrentGuid</div>
        </div>
    </div>
</Block>

<Block Title="显示标签" Introduction="组件双向绑定时会根据条件自动判断是否显示标签文字">
    <p>前置标签显式规则与 <code>BootstrapInput</code> 组件一致 <a href="inputs">[传送门]</a></p>
    <Divider Text="双向绑定显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="Model">
        <div class="row g-3">
            <div class="col-12">
                <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
            </div>
        </div>
    </ValidateForm>
    <Divider Text="双向绑定不显示标签" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" />
        </div>
    </div>
    <Divider Text="自定义 DisplayText" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <div class="row g-3">
        <div class="col-12">
            <Select Color="Color.Primary" Items="Items" @bind-Value="Model.Name" DisplayText="自定义城市" ShowLabel="true" />
        </div>
    </div>
</Block>

<Block Title="静态数据" Introduction="直接在 <code>Select</code> 组件内部进行硬编码书写，适用于静态数据下拉框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string">
                <Options>
                    <SelectOption Text="北京" Value="1" />
                    <SelectOption Text="上海" Value="2" Active="true" />
                    <SelectOption Text="广州" Value="3" />
                </Options>
            </Select>
        </div>
    </div>
</Block>

<Block Title="枚举数据" Introduction="<code>Select</code> 组件绑定枚举类型示例">
    <p>当绑定值为可为空枚举类型时，组件内部自动通过 <code>PlaceHolder</code> 值添加首选项，未设置 <code>PlaceHolder</code> 值时，使用资源文件中的 <b>请选择 ...</b> 作为首选项，本示例绑定 <code>EnumEducation</code> 枚举类型</p>
    <p>绑定值为枚举类型时，设置 <code>PalceHolder</code> 无效</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" PlaceHolder="@Localizer["PlaceHolder"]" ShowLabel="true" DisplayText="可为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem1" ShowLabel="true" DisplayText="可为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <Select @bind-Value="SelectedEnumItem" ShowLabel="true" DisplayText="不为空">
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <div class="form-control">@SelectedEnumItem</div>
        </div>
    </div>
</Block>

<Block Title="绑定可为空类型" Introduction="<code>Select</code> 组件绑定 <code>int?</code> 类型示例">
    <p>选中第一个选项时，绑定值 <code>SelectedIntItem</code> 为 <code>null</code></p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableIntItems" @bind-Value="SelectedIntItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedIntItemString()</div>
        </div>
    </div>
</Block>

<Block Title="绑定可为空布尔类型" Introduction="<code>Select</code> 组件绑定 <code>bool?</code> 类型示例">
    <p>可为空布尔类型多用于条件搜索框中</p>
    <p>选中第一个选项时，绑定值 <code>SelectedIntItem</code> 为 <code>null</code></p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select Items="NullableBoolItems" @bind-Value="SelectedBoolItem">
            </Select>
        </div>
        <div class="col-12 col-sm-6">
            <div class="form-control">@GetSelectedBoolItemString()</div>
        </div>
    </div>
</Block>

<Block Title="自定义选项模板" Introduction="通过设置 <code>ItemTemplate</code> 可以自定义选项渲染样式">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items">
                <ItemTemplate>
                    <div class="dropdown-item-demo">
                        <i class="fa fa-fa"></i>
                        <span>@context.Text</span>
                        <i class="fa fa-star"></i>
                    </div>
                </ItemTemplate>
            </Select>
        </div>
    </div>
</Block>

<Block Title="带搜索框的下拉框" Introduction="通过设置 <code>ShowSearchBox</code> 属性控制是否显示搜索框，默认为 false 不显示搜索框">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="Items" ShowSearch="true" />
        </div>
        <div class="col-12 col-sm-6">
            <Select TValue="string" Items="StringItems" ShowSearch="true" />
        </div>
    </div>
</Block>

<AttributeTable Items="@GetAttributes()" />

<EventTable Items="@GetEvents()" />
